<template>
	<div class="right-panel" ref="innerPlane">
		<template v-if="showRightPlane">
			<RightHeader :cpn-name="activeCpn ? activeCpn.label : ''"></RightHeader>
			<a-tabs v-model:activeKey="tabsState.activeKey">
				<a-tab-pane :key="item.key" v-for="item in tabsState.tabList">
					<template #tab>
						<div style="width: 80px; text-align: center">
							{{ item.label }}
						</div>
					</template>
					<!-- 根据组件的类型展示不同的配置内容 -->
					<template v-if="activeCpn">
						<template v-if="tabsState.activeKey === 'attrs'">
							<AttrsPanel :key="activeCpn.id" v-model="activeCpn"></AttrsPanel>
						</template>
						<template v-else-if="tabsState.activeKey === 'styles'">
							<StylesPanel :key="activeCpn.id" v-model="activeCpn"></StylesPanel>
						</template>
					</template>
					<template v-else>
						<PagePanel></PagePanel>
					</template>
				</a-tab-pane>
			</a-tabs>
		</template>
		<RightTips v-else></RightTips>
	</div>
</template>
<script setup>
import RightHeader from "./components/RightHeader/RightHeader.vue";
import RightTips from "./components/RightTips/RightTips.vue";
import ColorPicker from "@/components/ColorPicker/ColorPicker.vue";
import AttrsPanel from "./components/AttrsPanel/AttrsPanel.vue";
import StylesPanel from "./components/StylesPanel/StylesPanel.vue";
import PagePanel from "./components/PagePanel/PagePanel.vue";
import { reactive, ref, watch, computed, nextTick } from "vue";
import { storeToRefs } from "pinia";
import { useSketchRuleStore } from "@/stores/sketchRule";
import { useScreenCpnsStore } from "@/stores/screenCpns";
const sketchRuleStore = useSketchRuleStore();
const screenCpnsStore = useScreenCpnsStore();
const { sketchRuleState } = storeToRefs(sketchRuleStore);
const { screenCpnsState } = storeToRefs(screenCpnsStore);
const activeCpn = ref(null);
const props = defineProps({});
const innerPlane = ref();
const tabsState = ref({
	activeKey: "",
	tabList: [],
});
// 判断面板是否显示内容
const showRightPlane = computed(() => {
	if (screenCpnsState.value.screenCpns.length) {
		return true;
	} else {
		return false;
	}
});
// 设置tab页签
const setTabs = (cpn) => {
	if (!cpn) {
		tabsState.value = sketchRuleState.value.tabsState
	} else {
		tabsState.value = cpn.rightTabsOpts
	}
};
// 根据活跃组件id找到对应的组件(保持响应性)
watch(
	() => screenCpnsState.value.activeCpnId,
	(n, o) => {
		if (n) {
			activeCpn.value = screenCpnsState.value.screenCpns.find((cpns) => cpns.id === n);
		} else {
			activeCpn.value = null;
		}
		setTabs(activeCpn.value);
	},
	{
		immediate: true,
	}
);
defineExpose({
	innerPlane,
});
</script>
<style scoped lang="scss">
.right-panel {
	width: 400px;
	height: 100%;
	box-sizing: border-box;
	border: 1px solid #f0f0f0;
	.right-header {
		height: 40px;
		width: 100%;
		padding: 0 10px;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #f0f0f0;
		box-sizing: border-box;
		.breadcrumb-box {
			display: flex;
			align-items: center;
			gap: 5px;
		}
	}
}
.tips-box {
	font-size: 13px;
	color: rgba(0, 0, 0, 0.6);
	width: 100%;
	height: 15%;
	display: flex;
	justify-content: center;
	align-items: end;
}
:deep(.ant-tabs-tab) {
	padding: 8px 0;
	margin: 0px !important;
}
:deep(.ant-tabs-nav) {
	margin: 0px !important;
}
</style>
